<!DOCTYPE html>
<html lang="en" xmlns:class="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>书本详情</title>
</head>
<style>
    .top-title:hover{
        cursor: pointer;
        color: #b31e22!important;
    }
    .el-input-group__append, .el-input-group__prepend{
        background-color: rgb(238, 172, 62) !important;
        color: #ffffff!important;
    }
    .menu-index{
        text-align: center;
        width: 150px;
        color: #FFFFFF;
        cursor: pointer;
    }
    .menu-index:hover{
        background-color: rgb(231, 157, 32);
    }
    .menu-active{
        background-color: #fdef01 !important;
    }
    .SearchBar input {
        height: 50px;
        width: 500px;
    }
    .selectBar {
        height: 60px;
    }
    .menuList{
        background-color: #efd0d0 !important;
        color: #FFFFFF!important;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    .el-icon-star-off{
        height: 44px;
    }
    sapn{
        width: 100% !important;
        float: left !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
     }
    .detail{
        margin-left: 300px;
        margin-right: 300px;
        background-color: white;
        border-radius: 15px;
    }
    .app{
        background-color: #dad9d9;
        overflow: auto;
    }
    .bookImg{
        width:75%;
        margin-top:20px;
        margin-left:20px;
        border: solid 1px #ffffff;
        border-radius: 15px;
    }
    .introduction{
        display: flex;
        padding: 20px 50px;
    }
    .sx{
        float:left;
        width: 1px;
        height: 340px;
        margin-top: 30px;
        background: #e1e0e0;
        margin-left: -70px;
    }
    .btn1{
        position: absolute;
        font-size: 15px;
        color:#666666;
        border: none;
    }
    .btn2{
        position: absolute;
        font-size: 18px;
        left: 180px;
        bottom: -10px;
    }
    .btn3{
        position: absolute;
        font-size: 18px;
        left: 300px;
        bottom: -10px;
     }
</style>
<body>
<div id="app" class="app" >
    <!--顶部用户导航栏-->
    <template>
        <div style="font-size: 14px;">
            <div style="display: flex;height: 60px;padding: 0 320px;background-color: #f5f5f5;border-radius: 10px">
                <div v-show="visibleAlready" style="margin-top: 3px">
                    <el-col :span="6">
                        <el-avatar style="height: 50px;width:50px;" :src="User.userImg"></el-avatar>
                    </el-col>
                    <el-col :span="18" style="line-height:50px">
                        <span style="padding-right: 30px;line-height: 40px;color: #666;margin-left:30px">{{User.realName}}</span>
                    </el-col>
                </div>
                <div v-show="visibleNotYet" style="margin-top: 10px">
                    <span style="padding-right: 20px;line-height: 40px;color: #666;">欢迎光临淘书网,请</span>
                    <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpLogin">登录</el-button>
                    <span style="padding-right: 20px;line-height: 40px;">|</span>
                    <el-button type="text" style="color: #666" class="top-title" @click="jumpRegister">注册</el-button>
                </div>
                <div style="flex: 1;display: flex;">
                    <div style="flex: 0.75;"></div>
                    <div style="width: 300px;display: flex;">
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpPersonalCenter"> <i class="el-icon-user"></i>个人中心</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpCart"><i class="el-icon-shopping-cart-2"></i>购物车</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpOrders"><i class="el-icon-goods"></i>我的订单</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;margin-top: 9px" class="top-title" @click="jumpCollect"><i class="el-icon-star-off"></i>我的收藏</el-button>
                        <el-button type="text" v-show="visibleAlready" style="color: #666;margin-right: 10px;" class="top-title" @click=" killSession"><i class="el-icon-switch-button"></i>退出登录</el-button>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <template>
        <div class="detail">
            <el-row style="height: auto;margin-top: 20px">
                <el-col :span="12">
                    <img :src="book.bookImg" class="bookImg">
                </el-col>
                <div class="sx"></div>
                <el-col :span="10" style="margin-top:20px;margin-left: -20px">
                    <el-row style="margin-top:40px;">
                        <span style="font-size: 32px;color: #333333;">{{ book.bookName }}</span>
                        <el-image  v-if="isCollect==true" @click="collect" src="../img/collect.png" style="float: right;margin-top: 5px;cursor: pointer"></el-image>
                         <el-image v-else @click="cancelCollect" src="../img/collected.png" style="float: right;margin-top: 5px;cursor: pointer"></el-image>
                    </el-row>

                    <el-row style="margin-top:10px;">
                        <span style="font-size: 15px;color: #666666">[{{ book.author }}]</span>
                    </el-row>
                    <br>
                    <br>
                    <el-row>
                        <p style="float: left;color: #fe6144;font-size: 28px;margin-top: 10px;">¥{{book.price}}</p>
                    </el-row>
                    <span v-if="isOver" style="font-size: 15px;color: #666666;">仅剩
                        <span style="font-size: 15px;color:red">{{book.inventory}}</span> 件
                   </span>
                    <span v-else-if="isDone" style="font-size: 15px;color: #666666;">
                        <span style="font-size: 15px;color:red">已售空</span>
                   </span>
                    <span v-else style="font-size: 15px;color: #63e518;">库存充足</span>
                    <el-row style="position:absolute;bottom: 15px; flex-direction:row">
                        <span style="font-size: 15px;color: #666666;">{{sales}}人购买</span>
                        <el-button  type="danger" @click="addCart" class="el-icon-shopping-cart-1 btn2">加入购物车</el-button>
                        <el-button  type="warning" @click="pay" class="el-icon-s-goods btn3">立即购买</el-button>
                    </el-row>

                </el-col>
            </el-row>
            <hr style="border-width: 1px; border-color: #e1e0e0;border-style: solid;width: 95%">
            <el-row  style="height: auto;">
                <div class="introduction">
                    <span style="font-size: 15px;color: #666666">简介:{{ book.introduction }}</span>
                </div>
            </el-row>
        </div>
    </template>
    <template>
    <div class="detail" style="margin-top: 20px">
        <br>
        <span style="font-size: 20px;color: #666666;margin-left: 30px;margin-top: 15px">评论区</span>
        <div style="margin-top: 15px"></div>
        <el-card style="padding: 10px 20px;width: auto" v-for="item in dataList" :key="book.id"
                 class="card">
            <el-row style="display:flex;align-items: center">
                <el-avatar style="height: 40px;width:40px;" :src="item.userImg"></el-avatar>
                <div style="display: flex;flex-direction: column;margin-left: 10px">
                    <span style="font-size: 15px">{{item.realName}}</span>
                    <span style="font-size: 12px;color: #666666">{{item.time}}</span>
                </div>
            </el-row>
            <el-row style="margin-top: 10px">
                <span style="font-size: 15px">{{item.appraiseText}}</span>
            </el-row>
        </el-card>
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
            </el-pagination>
        </el-row>
    </div>
    </template>
    <el-dialog
            title="结算中"
            :visible.sync="popShow"
            width="25%"
            :before-close="handleClose">
        <el-row><span style="font-size: 17px;margin-left: 20px"><span style="color: red">{{count}}秒</span>后前往订单详情页</span></el-row>
        <el-row>
            <br><el-button @click="jumpBookDetails" style="margin-left: 200px">点击取消</el-button>
        </el-row>

    </el-dialog>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/jutils.js"></script>

<script>
    new Vue({
        el: '#app',
        created() {
            //钩子函数，vue对象初始化后执行
            this.getUser()
            this.getBookDetail();
        },
        mounted() {
        },
        methods: {
            getBookDetail() {
                let url = window.location.href
                let p = url.split('?')[1]
                let params = new URLSearchParams(p)
                this.id = params.get('id')
                // 发送ajax请求
                axios.get("/book/" + this.id).then((res) => {
                    this.book = res.data;
                    this.sales=this.getDisplayRange(this.book.sales)
                    this.getDisplayRange1(this.book.inventory)
                    console.log(this.book);
                    this.isCollected(this.book.id);
                });
                axios({
                    method:"post",
                    url:"/appraise/page?currentPage="
                        + this.currentPage + "&pageSize=" + this.pageSize+ "&bookId="+this.id,
                }).then(resp =>{
                    this.dataList = resp.data.items;
                    console.log( this.dataList)
                    //设置表格总记录数
                    this.totalCount = resp.data.totalCount;
                })
            },
            //结算
            pay(){
                if(!this.User.username){
                    this.$message.warning("请登录后操作");
                    return;
                }
                if (this.book.status==-1||this.book.inventory<=0){
                    this.$message.warning("该书籍已下架或库存不足");
                    return;
                }
                let data={
                    name:this.book.bookName,
                    bookImg:this.book.bookImg,
                    totalPrice:this.book.price,
                    carts:[{quantity:1,bookId:this.book.id}]
                }
                console.log(data);
                axios({
                    method:"post",
                    url:"/orders/create?type=pay",
                    data:data
                }).then(resp =>{
                    if (resp.data.code==1){//结算成功
                        this.popShow = true
                        const TIME_COUNT = 3;
                        if(!this.timer){
                            this.count = TIME_COUNT;
                            this.popShow = true;
                            this.timer = setInterval(()=>{
                                if(this.count > 0 && this.count <= TIME_COUNT){
                                    this.count--;
                                }else{
                                    this.popShow = false;
                                    clearInterval(this.timer);
                                    this.timer = null;
                                    this.jumpConfirmAddress(resp.data.data);
                                }
                            },1000)
                        }
                    }else{
                        this.$message.error(resp.msg)
                    }
                })
            },
            isCollected(id){
                axios({
                    method:"post",
                    url:"/collect/"+id,
                }).then(resp =>{
                    if (resp.data.data!=null) {
                        this.isCollect=false
                    }else {
                        this.isCollect=true
                    }
                })
            },
            cancelCollect(){
                axios({
                    method:"delete",
                    url:"/collect/"+this.book.id,
                }).then(resp =>{
                    if (resp.data.code==1){
                        this.$message.error("已取消收藏")
                        this.isCollect==!this.isCollect
                        this.getBookDetail();
                    } else{
                        this.$message.error(resp.data.msg)
                    }
                })
            },
            collect(){
                if(!this.User.username){
                    this.$message.warning("请登录后操作");
                    return;
                }
                axios({
                    method:"put",
                    url:"/collect/"+this.book.id,
                }).then(resp =>{
                    if (resp.data.code==1){
                        this.$message.success("已收藏")
                        this.isCollect==!this.isCollect
                        this.getBookDetail();
                    } else{
                        this.$message.error(resp.data.msg)
                    }
                })
            },

            addCart(){
                if(!this.User.username){
                    this.$message.warning("请登录后操作");
                    return;
                }
                if (this.book.status==-1||this.book.inventory<=0){
                    this.$message.warning("该书籍已下架或库存不足");
                    return;
                }
                this.cart.bookId=this.book.id;
                this.cart.userId=this.User.id;
                axios({
                    method:"put",
                    url:"/cart",
                    data:this.cart
                }).then(resp =>{
                    if (resp.data.code==1){
                        this.$message.success("已加入购物车")
                    } else{
                        this.$message.error(resp.data.msg)
                    }
                })
            },
            getDisplayRange(sales) {
                const digitCount = sales.toString().length;
                const baseDigit = parseInt(sales.toString().slice(0, 1));
                let range = baseDigit;
                if (digitCount==1){
                    return range;
                }
                for (var i=0;i<digitCount-1;i++){
                    range +="0"
                    console.log(range)
                }
                range+="+"
                return range;
            },
            getDisplayRange1(inventory) {
                if (inventory<100&&inventory>0){
                    this.isOver=true
                }
                if (inventory<=0){
                    this.isOver=false
                    this.isDone=true
                }
            },
            getUser() {//获取用户名
                //发送ajax请求
                axios({
                    method:"get",
                    url:"/user",
                }).then(resp =>{
                    this.User = resp.data;
                    console.log(this.User);
                    if (this.User !== null && this.User !== ""&& this.User !==undefined) {
                        this.visibleNotYet = false;
                        this.visibleAlready= true;
                    }else{this.User={username:null}}
                })
            },
            killSession() {//退出登录
                this.$confirm('确认退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.visibleNotYet = true;
                    this.visibleAlready = false;
                    //发送ajax请求
                    axios.post("/user/logout").then((res) => {

                    })
                    this.$message({
                        message: '退出成功',
                        type: 'success'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.showCollect();
                // console.log(`每页 ${val} 条`);
            },
            //当前页数
            handleCurrentChange(val) {
                this.currentPage = val;
                this.showCollect();
                // console.log(`当前页: ${val}`);
            },

            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                this.$refs.menus.open(keyPath);
            },
            jumpConfirmAddress(ordersId){
                window.location.href = "confirmAddress.html?ordersId=" + ordersId;
            },
            jumpAllBook(){
                location.href ="allBook.html";
            },
            jumpIndex(){
                location.href ="index.html";
            },
            jumpLogin(){
                location.href ="/login_page/login.html";
            },
            jumpRegister(){
                location.href ="/login_page/register.html";
            },
            jumpCollect(){
                location.href ="/user_page/collect.html";
            },
            jumpPersonalCenter(){
                location.href ="personCenter.html";
            },
            jumpCart(){
                location.href ="cart.html";
            },
            jumpOrders(){
                location.href ="orders.html";
            },
            jumpBookDetails(){
                let val=this.book.id;
                console.log(val)
                location.href="bookDetails.html?id=" + val
            }
        },
        data() {
            return {
                isCollect:true,
                totalCount:0,
                pageSize:10,
                currentPage:1,
                input:'',
                dataList:[],
                User:[],//用户信息
                visibleNotYet:true,
                visibleAlready:false,
                cart:{ quantity:1 },
                popShow: false,
                count:'',//倒计时
                sales:"",
                inventory:'',
                isOver:false,
                isDone:false,
                book:{
                    id:'',
                    bookName:'',
                    author:'',
                    bookImg:'',
                    price:'',
                    inventory:'',
                    introduction:''
                },
                activeIndex: '1',
            }
        }
    })
</script>
</html>